<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/static/web/jsp/include.jsp"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拍卖</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="${path}/static/web/style/style.css">
    <link rel="stylesheet" href="${path}/static/web/style/hizoom.css">
    <link rel="stylesheet" href="${path}/static/web/style/page_nav.css">
    <link rel="stylesheet" href="${path}/static/web/style/art.css">
    <link rel="stylesheet" href="${path}/static/web/style/default-skin.css">
    <link rel="stylesheet" href="${path}/static/web/style/photoswipe.css">
    <script>
        var _id = '${id}';
        var _verify = false||'${verify}';
    </script>
</head>
<body>
    <!-- 导航 -->
    <%@ include file="/static/web/jsp/top.jsp"%>

    <div id="detailController" v-cloak>
        <!-- 详情内容 -->
        <div class="model_container">
            <div class="link_sprite">当前位置：<a href="${path}/web/auction">拍卖</a> &#155; <a href="">当前拍卖</a> &#155; <a href="">拍卖详情</a></div>

            <div class="content_block clearfix">
                <!-- 轮播 -->
                <div class="detail_slide">
                    <ul class="slides">
                        <li class="hizoom" v-for="img in imgs"><img src="${path}/static/web/images/pro_slide01.png"  v-sy-img="img"/></li>
                    </ul>
                </div>
                <div class="detail_head clearfix">
                    <div class="head_top">
                        <div class="head_data" >
                            <div class="data_item" @click="focus" v-if="isFocus == 1"><i class="icon icon_collect"></i><span>{{item.focusCnt}}</span></div>
                            <div class="data_item" @click="focus" v-if="isFocus == 0"><i class="icon icon_collect icon_collect_off"></i><span>{{item.focusCnt}}</span></div>
                            <div class="data_item"><i class="icon icon_scan"></i><span>{{item.viewNum}}</span></div>
                        </div>
                        <div class="head_thead">
                            <h2 class="title">{{item.goodsName}}</h2>
                            <p class="author">作者：<span>{{item.artName}}</span><span v-if="item.goodsTime">作品年代：{{item.goodsTime}}年</span>
                                <span>作品尺寸（厘米）：长:{{item.height}} 宽:{{item.width}} {{item.high?'高:'+item.high:''}}</span></p>
                        </div>
                    </div>

                    <div class="head_info" v-if="isGoods == 2">
                        <h3 class="audit_title">未通过</h3>
                        <p class="audit_desc">原因：{{item.notVerifyReason}}</p>
                    </div>

                    <div class="head_info" v-if="isAuction > 0 && isGoods != 2">
                        <p class="shop_price">当前价：<span>¥{{auction.nowPrice}}</span> {{auction.endMoney > 0 ? '一口价:￥'+auction.endMoney:''}}</p>
                        <p class="shop_price" v-if="auction.entrustMoney && auction.entrustMoney > 0">保证金：<span>¥{{auction.entrustMoney}}</span></p>
                        <div class="count_down" v-if="isAuction == 1">
                            <p>结拍倒计时：<span>{{time.hour}}</span>:<span>{{time.min}}</span>:<span>{{time.sec}}</span></p>
                        </div>
                        <div class="offer_price" >
                            <div class="offer_box">
                                <a class="fl price_btn off" href="javascript:void(0);" @click="subPrice">-</a>
                                <a class="fr price_btn" href="javascript:void(0);" @click="addPrice">+</a>
                                <div class="put_box">
                                    <input class="price_put" type="text"  name="price" v-model.number="price" />
                                </div>
                            </div>
                            <div class="offer_btn">
                                <a class="btn " :class="{'btn_primary offer_price_btn':isAuction == 1,'btn_disabled':isAuction==2}" href="javascript:void(0);" @click="param.price = true">出价</a>
                            </div>
                        </div>

                        <div class="buy_btn" v-if="auction.endMoney > 0"  @click="addOrder"> <!-- v-if="auction.nowPrice < auction.endMoney" -->
                            <a class="btn btn_primary" href="javascript:void(0);" :class="{'btn_primary':isAuction == 1,'btn_disabled':isAuction==2}">直接购买</a>
                        </div>

                    </div>
                    <div class="head_info" v-if="isAuction <= 0 && isGoods != 2">
                        <p class="shop_price" v-if="isAuction == 0">成交价：<span>¥{{auction.nowPrice}}</span></p>
                        <p class="shop_price" v-if="isAuction == 0 && auction.entrustMoney && auction.entrustMoney > 0">保证金：<span>¥{{auction.entrustMoney}}</span></p>

                        <div class="buy_btn" @click="toWantBuy">
                            <a class="btn btn_primary" id="want_art" href="javascript:void(0);">我想买</a>
                        </div>
                    </div>
            </div>

            <div class="content_block">
                <div class="label_box">
                    <span class="label_item"  v-if="item.conNum"><i class="icon icon_nation"></i>国家编码：NO.{{item.conNum}}</span>
                    <%--<span class="label_item"  v-if="!item.conNum"><i class="icon icon_nation"></i>国家编码：暂无</span>--%>
                    <span class="label_item"><i class="icon icon_author"></i>作者上传：<img class="avatar" init-src="${path}/static/web/images/author.jpg" v-sy-img="item.headImg"/>{{item.artName}}</span>
                    <span class="label_item" v-if="item.ethTradeTime"><i class="icon icon_link" ></i>区块链存证时间：{{item.ethTradeTime}}</span>
                    <%--<span class="label_item" v-if="!item.ethTradeTime"><i class="icon icon_link" ></i>区块链存证时间：暂无</span>--%>
                </div>
                <div class="keywords_box" v-if="keywords.length > 0">
                    <span class="label">分类：</span>
                    <div class="keywords_list">
                        <span v-for="key in keywords">{{key}}</span>
                    </div>
                </div>
            </div>

            <div class="content_block" v-if="isAuction >= 0"> <!--  v-if="isAuction > 0" -->
                <span class="block_price">起拍价：<em class="large">￥{{auction.originPrice}}</em></span>
                <span class="block_price" v-if="auction.money > 0">加价幅度：<em class="large">￥{{auction.money}}</em></span>
                <span class="block_price">延时：<em class="large">5分钟/次</em></span>
                <span class="block_price">服务费率：成交价x10%</span>
            </div>

            <h2 class="block_head">作者介绍</h2>
            <div class="content_block clearfix">
                <img class="author_avatar" init-src="${path}/static/web/images/author.png" v-sy-img="item.headImg"/>
                <div class="author_info">
                    <h3 class="name">{{item.artName}}</h3>
                    <p class="desc">{{item.authorInfo}}</p>
                </div>
            </div>

            <h2 class="block_head">作品介绍</h2>
            <div class="content_block">
                <div class="content_desc" id="imgshow">
                    <figure  v-for="info in item.goodsInfo">
                        <div class="img-dv">
                            <a :href="'${path}/download?id='+img" v-if="info.img" v-for="img in info.img" >
                                <img init-src="${path}/static/web/images/slide_01.png" v-sy-img="img"/>
                            </a>
                        </div>
                        <figcaption class="img_desc">{{info.content}}</figcaption>
                    </figure>
                </div>
            </div>

            <h2 class="block_head" v-if="isAuction == 1">出价记录（{{records.length}}）</h2>
            <div class="content_block" v-if="isAuction == 1">
                <div class="offer_list">
                    <ul>
                        <li :class="{'active':index==0}" v-for="(item,index) in records"><span>{{item.userName}}</span><span>￥{{item.userBidPrice}}</span><span>{{index == 0?'领先':'出局'}}</span></li>
                    </ul>
                </div>
            </div>

            <h2 class="block_head" v-if="isAuction >= 0">历史足迹</h2>
            <div class="content_block" v-if="isAuction == 0 && verifyAuth == 0 && isGoods == 1 && foots.length > 0 && isVip == 1">
                <div class="auction_history">
                    <div class="auction_item" v-for="item in foots">
                        <div class="item_content right_border">
                            <div class="item_aside">
                                <i class="icon icon_arrow_right"></i>

                                <div class="item_txt">
                                    <p>上链时间戳：{{item.ethTime}}</p>
                                </div>
                                <div class="item_txt">
                                    <p>地址戳：{{item.latitude}} {{item.longitude}}</p>
                                </div>
                                <div class="item_txt" v-if="item.type == 1">
                                    <span>国家编码：{{item.conNum}}</span>
                                    <span class="fr">以太网区块编号：{{item.ethTradeHeight}}</span>
                                </div>
                                <div class="item_txt" v-if="item.type == 2">
                                    <span>交易价格：¥{{item.price}}</span>
                                    <span class="fr">以太网区块编号：{{item.ethTradeHeight}}</span>
                                </div>
                                <div class="item_txt">
                                    <span class="fl">Hash：</span><p class="hash_code">0x{{item.hashCode}}</p>
                                </div>
                                <div class="item_txt" v-if="item.type == 2">
                                    <span>卖出人：{{item.artName}}（hash:0x{{item.artCode}}）</span>
                                    <span class="fr">买入人：{{item.buyerName}}（hash:0x{{buyerCode}}）</span>
                                </div>
                                <div class="item_txt" v-if="item.type == 1">
                                    <span>作者：{{item.artName}}（hash:0x{{item.artCode}}）</span>
                                </div>
                            </div>
                        </div>
                        <div class="item_content item_type" v-if="item.type == 2">
                            <img class="type_pic" src="${path}/static/web/images/icon_trade.png"/>
                            <p class="type_name">交易</p>
                        </div>
                        <div class="item_content item_type" v-if="item.type == 1">
                            <img class="type_pic" src="${path}/static/web/images/icon_link.png"/>
                            <p class="type_name">上链</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 非会员查看历史足迹 -->
            <div class="content_block" v-if="isVip == 0">
                <div class="auction_history">
                    <div class="non_members">
                        <span>仅对超级会员开放哦</span>
                        <a href="javascript:void(0);" class="btn btn_primary" @click="rechargeVip">充超级会员</a>
                    </div>
                </div>
            </div>

            <!-- 没有历史足迹情况下 -->
            <div class="content_block" v-if="isVip == 1 && foots.length == 0">
                <div class="auction_history">
                    <p class="register_tip">该艺术品还没有足迹</p>
                </div>
            </div>

            <h2 class="block_head" v-if="verifyAuth == 0">发表看法<em class="count">{{commentCnt}}</em><a class="head_btn comment_btn" href="javascript:void(0);" @click="showComment(true)">发表评论</a></h2>
            <div class="content_block" v-if="verifyAuth == 0">
                <div class="recomment_box">
                    <div class="recomment_item" v-for="comment in comments">
                        <img class="recomment_avatar" init-src="${path}/static/web/images/author.png" v-sy-img="comment.headImg"/>
                        <div class="recomment_info">
                            <div class="recomment_head"><span class="name">{{comment.nickName}}</span><span class="fr">{{comment.createTime}}</span></div>
                            <div class="recomment_content">
                                <p v-if="comment.priceTest">估价：{{comment.priceTest}}</p>
                                <p v-if="comment.content">评论：{{comment.content}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <nav arialabel="page navigation" class="tcdPageCode" id="PageNavId"></nav>
            </div>

            <h2 class="block_head" v-if="verifyAuth == 0">更多相似<a class="switch_btn" href="javascript:void(0);" @click="loadLike">换一批 >></a></h2>
            <div class="mt_20" v-if="verifyAuth == 0">
                <div class="waterfull clearfix">
                    <ul>
                        <li class="item" v-for="item in auctions" @click="jump(item)">
                            <a href="#" :href="'${path}/web/auction/'+item.id" class="a-img">
                                <img src="${path}/static/web/images/waterfull_01.png" alt="" v-sy-img="item.goodsImg">
                            </a>
                            <div class="content">
                                <div class="item_head">
                                    <h3 class="title">{{item.goodsName}}</h3>
                                    <div class="label">
                                        <i class="icon icon_nation" v-if="item.conNum"></i>
                                        <i class="icon icon_author" v-if="item.ftype == 1"></i>
                                        <i class="icon icon_link" v-if="item.ethTradeNo"></i>
                                    </div>
                                </div>
                                <div class="info">
                                    <span class="author">作者：{{item.goodsUploadUserName}}</span>
                                    <span class="year" v-if="item.goodsTime">{{item.goodsTime}}年</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 非会员提示模块 -->
        <div class="art_model charge_model" :style="{'display':param.vip?'block':'none'}">
            <div class="model_wrap">
                <div class="model_header">
                    <div class="head_title">您还不是会员哦</div>
                    <a class="icon icon_close head_close" href="javascript:void(0);" @click="showVip(false)"></a>
                </div>
                <div class="model_item">
                    <div class="art_model_content">
                        <h2 class="title">会员</h2>
                        <p class="desc">一次充值288元享无限次拍卖权限，可查看区块链以及专属客服的服务。</p>
                    </div>
                    <div class="model_btn mt_20" @click="rechargeVip">
                        <a href="javascript:void(0);" class="btn btn_primary btn_recharge_model">充值会员</a>
                    </div>
                </div>
                <div class="model_item">
                    <div class="art_model_content">
                        <h2 class="title">保证金</h2>
                        <p class="desc">只针对本次竞拍产品，竞拍结束后24小时候进行退保证金服务。</p>
                    </div>
                    <div class="model_btn mt_20" @click="rechargeCash">
                        <a href="javascript:void(0);" class="btn btn_primary btn_recharge_model">缴纳保证金</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 评论模块 -->
        <div class="art_model comment_model" :style="{'display':param.comment?'block':'none'}" >
            <div class="model_wrap">
                <div class="model_header">
                    <div class="head_title">发表评论</div>
                    <a class="icon icon_close head_close" href="javascript:void(0);" @click="showComment(false)"></a>
                </div>
                <div class="art_model_content">
                    <form action="">
                        <%--<div class="model_put"><input type="text" placeholder="请估价" v-model="comment.priceTest"/></div>--%>
                        <div class="model_put"><input type="text" placeholder="请输入评论" v-model="comment.content"/></div>
                    </form>
                </div>
                <div class="model_btn mt_20" @click="addComment">
                    <a href="javascript:void(0);" class="btn btn_primary">发 布</a>
                </div>
            </div>
        </div>

        <!-- 充值 -->
        <div class="art_model recharge_model" :style="{'display':param.recharge?'block':'none'}">
            <div class="model_wrap">
                <div class="model_header">
                    <div class="head_title" v-show="param.type==1">会员充值</div>
                    <div class="head_title" v-show="param.type==2">缴纳保证金</div>
                    <a class="icon icon_close head_close" href="javascript:void(0);" @click="showRecharge(false)"></a>
                </div>
                <div class="art_model_content">
                    <div class="pay_item" v-show="param.type==1">
                        <span class="pay_name">充值金额</span>
                        <span class="fr red">￥288.00</span>
                    </div>

                    <div class="pay_ways">
                        <div class="pay_way" data-way="0" :class="{'on':recharge.payType==1}" @click="setReachargePayType(1)">
                            <i class="icon icon_zfb"></i><span>支付宝</span><i class="fr icon icon_radio"></i>
                        </div>
                        <div class="pay_way" data-way="1" :class="{'on':recharge.payType==2}" @click="setReachargePayType(2)">
                            <i class="icon icon_wx"></i><span>微信</span><i class="fr icon icon_radio"></i>
                        </div>
                    </div>
                </div>
                <div class="model_btn mt_20" @click="pay">
                    <a href="javascript:void(0);" class="btn btn_primary">确认充值</a>
                </div>
            </div>
        </div>

            <!-- 我想买 -->
            <div class="art_model confirm_model" :style="{'display':param.buy?'block':'none'}">
                <div class="model_wrap">
                    <div class="model_header"><div class="head_title">我想买</div></div>
                    <div class="art_model_content"><p class="model_tip">您的需求我们已经收到，如您确认您想购买这幅画，请按确定，我们将通过手机号【{{phone}}】与您联系</p></div>
                    <div class="model_btn_group mt_20">
                        <a href="javascript:void(0);" class="btn btn_default_gray" @click="param.buy=false">取消</a>
                        <a href="javascript:void(0);" class="btn btn_primary" @click="wantBuy">确定</a>
                    </div>
                </div>
            </div>

            <!-- 确定要出价吗? -->
            <div class="art_model offer_model" :style="{'display':param.price?'block':'none'}">
                <div class="model_wrap">
                    <div class="model_header">
                        <div class="head_title">提示</div>
                    </div>
                    <div class="art_model_content">
                        <p class="text_center">确定要出价吗？</p>
                    </div>
                    <div class="model_btn_group mt_20">
                        <a href="javascript:void(0);" class="btn btn_default_gray" @click="param.price=false">取消</a>
                        <a href="javascript:void(0);" class="btn btn_primary" @click="joinAuction">确定</a>
                    </div>
                </div>
            </div>
    </div>

    <%@ include file="/static/web/jsp/footer.jsp"%>

    <form id="form" action="${path}/web/pay/onlinePay" method="post">
        <input type="hidden" name="content" id="content"/>
    </form>

    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <!-- Background of PhotoSwipe.
             It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>

        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">

            <!-- Container that holds slides.
                PhotoSwipe keeps only 3 of them in the DOM to save memory.
                Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>

            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">

                <div class="pswp__top-bar">

                    <!--  Controls are self-explanatory. Order can be changed. -->

                    <div class="pswp__counter"></div>

                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                    <button class="pswp__button pswp__button--share" title="Share"></button>

                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>

                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>

                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>

                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>

            </div>

        </div>

    </div>
</body>
<%--<script src="${path}/static/web/js/jquery.min.js"></script>--%>
<script src="${path}/static/web/js/slide.js"></script>
<script src="${path}/static/web/js/carousel.js"></script>

<script src="${path}/static/web/js/jquery.masonry.min.js"></script>
<script src="${path}/static/web/js/jQeasing.js"></script>

<script src="${path}/static/web/js/jquery.nicescroll.js"></script>

<script src="${path}/static/web/js/hizoom.js"></script>

<script src="${path}/static/web/js/jquery.page.js"></script>

<script src="${path}/static/web/js/art.js"></script>

<!-- 2018-07-19 -->
<script src="${path}/static/web/js/photoswipe.js"></script>
<script src="${path}/static/web/js/photoswipe-ui-default.min.js"></script>
<script src="${path}/static/web/js/initPhotoSlide.js"></script>

<script src="${path}/static/web/js/biz/auction_detail.js"></script>
<script>
    //轮播
    $(document).ready(function(){
//        $('.detail_slide').flexslider({
//            directionNav: true,
//            pauseOnAction: false
//        });

//        $(".tcdPageCode").createPage({
//            pageCount:100,
//            current:1,
//            backFn:function(p){
//                console.log(p);
//            }
//        });

    });
    //放大镜
//    $(document).ready(function(){
//        $('.hizoom').hiZoom({
//            width: 520,
//            height:350,
//            position: 'right'
//        });
//    });

    //出价记录列表滚动


    //出价弹出框
    $('.offer_price_btn').click(function(){
        $('.charge_model').show();
    })

    //发表评论弹出
    $('.comment_btn').click(function(){
        $('.comment_model').show();
    });

    $('.switch_btn').click(function(){
        $.confirmModel('支付完成','您已支付成功，恭喜已经竞拍！','确 定')
    })


    
</script>

</html>